<template>
  <div class="wrapper">
    <!-- 标头部分 -->
    <header class="header">
      <p>
        <span>数据态势</span>
        <i @click="jumpDataEvaluationMonitoring">数据评价监控页面跳转</i>
      </p>
    </header>
    <main>
      <!-- 日期部分 -->
      <div class="dateContainer">
        <el-button type="primary" style="margin-top: 20px" @click="jumpConfig"
          >配置</el-button
        >
        <div class="dateTime">
          <!-- <span>日期</span>
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker> -->
        </div>
      </div>
      <!-- echart图表部分 -->
      <div class="dataChartSecond">
        <!-- <div id="summarizationData"></div> -->
        <div id="histogram"></div>
        <div id="historialData"></div>
        <div id="dailyTradingData" ref="dailyTradingData"></div>
      </div>
      <!-- table表格 -->
      <div class="tableSection">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="420"
          :header-cell-style="{ background: '#EDEDED', color: '#000000' }"
          :cell-style="rowStyle"
        >
          <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="resourceName"
            label="资源名称"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="tableName"
            width="150"
            label="对象名称"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="historyNum"
            label="数据总量(条)"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="currentNum"
            label="当日交换总量(条)"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="最后更新时间"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="abnormalTime" label="异常时间" align="center">
          </el-table-column>
          <el-table-column prop="recoverTime" label="恢复时间" align="center">
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageConfig.currentPage"
            :page-sizes="pageConfig.pageSizes"
            :page-size="pageConfig.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageConfig.total"
          >
          </el-pagination>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "dataTrend",
  components: {},
  data() {
    return {
      dateValue: new Date(),
      tableData: [],
      histroyDataChart: null, //历史数据汇总图表
      dailyTradingDataChart: null, //当日交换总量
      allHistroyChart: null, //总体态势汇总表
      pageConfig: {
        currentPage: 1,
        pageSizes: [5, 10, 20, 50, 100, 200],
        pageSize: 5,
        total: 0,
      },
      valueList: [],
    };
  },
  created() {
    //console.log(this.$store.state.app.zongValue);
    if (this.$store.state.app.zongValue[0] !== "") {
      this.valueList = this.$store.state.app.zongValue.map((item) => {
        return item.label;
      });
      //console.log(this.valueList);
    }
  },
  mounted() {
    let tokens = sessionStorage.getItem("Authorization");
    if (!tokens) {
      axios.post("/cas/jwt/token.do").then((res) => {
        if (res && res.status === 200) {
          let tokens = res.data.returnInfo;
          sessionStorage.setItem("Authorization", tokens);
          this.getTabelTrendData();
          this.getHistroyData();
          this.getDailyTradingData();
          this.getAllTrendData();
        }
      });
    } else {
      this.getTabelTrendData();
      this.getHistroyData();
      this.getDailyTradingData();
      this.getAllTrendData();
    }

    // this.getTabelTrendData();
    // this.getHistroyData();
    // this.getDailyTradingData();
    // this.getAllTrendData();
    window.addEventListener("resize", () => {
      this.histroyDataChart.resize();
      this.dailyTradingDataChart.resize();
      this.allHistroyChart.resize();
    });
  },
  methods: {
    //跳转配置页面
    jumpConfig() {
      //this.$router.push({
      //  path: "/emconfig",
      //  query: { treeValue: this.treeValue },
      //});
      this.$router.push("/emconfig");
    },
    //表格阈值变红方法
    rowStyle({ row }) {
      let nowDate = new Date().getTime();
      let oldDate = new Date(row.updateTime).getTime();
      let num = Math.floor((nowDate - oldDate) / 60000);
      if (num >= row.thresholdValue) {
        return "color:red;";
      }
      return "";
    },
    // 每页条数变化处理函数
    handleSizeChange(val) {
      this.pageConfig.pageSize = val;
      this.getTabelTrendData();
    },
    // 当前页码变化处理函数
    handleCurrentChange(val) {
      this.pageConfig.currentPage = val;
      this.getTabelTrendData();
    },
    // 获取表格数据
    getTabelTrendData() {
      //console.log(this.valueList);
      axios
        .get(
          `/situation/findPage?tableNames=${this.valueList}&pageNum=${this.pageConfig.currentPage}&pageSize=${this.pageConfig.pageSize}`
        )
        .then((res) => {
          if (res && res.status === 200) {
            this.tableData = res.data.content;
            this.pageConfig.total = res.data.totalSize;
          }
        });
    },
    // 序号
    indexMethod(index) {
      let currentPageNum = this.pageConfig.currentPage - 1;
      let currentPageSize = this.pageConfig.pageSize;
      let num = currentPageNum * currentPageSize + (index + 1);
      return num;
    },
    //获取历史数据
    getHistroyData() {
      axios
        .get(`/situation/historySummary?tableNames=${this.valueList}`)
        .then((res) => {
          if (res && res.status === 200) {
            let newHistroyData = [];
            res.data.data.forEach((item) => {
              newHistroyData.push({
                value: parseFloat(item.ratio),
                name: item.resourceName,
              });
            });
            let option = {
              tooltip: {
                trigger: "item",
                formatter: function (param) {
                  let tipString = `${param.data.name} : ${param.data.value}%`;
                  return tipString;
                },
              },
              legend: {
                orient: "vertical",
                top: 50,
                right: 10,
              },
              title: {
                text: "历史数据汇总",
                left: "left",
              },
              series: [
                {
                  // name: "访问来源",
                  type: "pie",
                  radius: ["40%", "70%"],
                  center: ["30%", "45%"],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: "#fff",
                    borderWidth: 2,
                  },
                  label: {
                    show: false,
                    position: "center",
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: "20",
                      fontWeight: "bold",
                    },
                  },
                  labelLine: {
                    show: false,
                  },
                  data: newHistroyData,
                },
              ],
            };
            this.drawHistorialData(option);
          }
        });
    },
    // 总体态势图表绘制
    getHistogram(option) {
      let chartDom = document.getElementById("histogram");
      this.allHistroyChart = this.$echarts.init(chartDom);
      this.allHistroyChart.setOption(option);
    },
    // 历史数据汇总图标绘制
    drawHistorialData(option) {
      let chartDom = document.getElementById("historialData");
      this.histroyDataChart = this.$echarts.init(chartDom);
      this.histroyDataChart.setOption(option);
    },
    // 获取当日交换总量
    getDailyTradingData() {
      axios
        .get(`/situation/daySummary?tableNames=${this.valueList}`)
        .then((res) => {
          // axios.get("http://172.16.89.31:8888/situation/daySummary").then((res) => {
          if (res && res.status === 200) {
            let xAxisData = [];
            let seriesData = [];
            res.data.data.forEach((item) => {
              xAxisData.push(item.resourceName);
              seriesData.push(parseFloat(item.ratio));
            });
            let option = {
              tooltip: {
                trigger: "item",
                formatter: function (param) {
                  let tipString = `${param.value}%`;
                  return tipString;
                },
              },
              grid: {
                top: 45,
                //left:28,
                //right:20,
                bottom: 90,
              },
              xAxis: {
                type: "category",
                // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                data: xAxisData,
                axisLabel: {
                  interval: 0,
                  rotate: 50,
                  lineHeight: 10,
                  formatter: function (val) {
                    let length = val.length;
                    if (length > 5) {
                      let ret = "";
                      let rowN = Math.ceil(length / 5);
                      for (let i = 0; i < rowN; i++) {
                        let ret2 = "";
                        ret2 = val.substring(5 * i, 5 * (i + 1)) + "\n";
                        ret = ret + ret2;
                      }

                      return ret;
                    } else {
                      return val;
                    }
                  },
                },
              },
              yAxis: {
                type: "value",
              },
              title: {
                text: "当日交换总量",
                left: "left",
              },
              series: [
                {
                  // data: [120, 200, 150, 80, 70, 110, 130],
                  data: seriesData,
                  type: "bar",
                  showBackground: true,
                  // itemStyle: {
                  //   color: "blue",
                  // },
                  // itemStyle: {
                  //   color: function (params) {
                  //     let colorBOX = ["#c23531", "#2f4554", "#61a0a8"];
                  //     return colorBOX[params.dataIndex];
                  //   },
                  // },
                },
              ],
            };
            this.drawDailyTradingData(option);
          }
        });
    },
    //每日交易总量图表绘制
    drawDailyTradingData(option) {
      this.dailyTradingDataChart = this.$echarts.init(
        this.$refs.dailyTradingData
      );
      this.dailyTradingDataChart.setOption(option);
    },
    //获取总体态势图表数据
    getAllTrendData() {
      axios
        .get(`/situation/overall?tableNames=${this.valueList}`)
        .then((res) => {
          if (res && res.status === 200) {
            let source = res.data.data;
            //console.log(res)
            let option = {
              legend: {
                top: 20,
              },
              tooltip: {},
              dataset: {
                //dimensions: ["resourceName", "historyNum", "dayNum"],
                dimensions: ["resourceName", "historyNum", "dayNum"],
                source: source,
              },
              grid: {
                top: 45,
                //left:28,
                //right:20,
                bottom: 90,
              },
              xAxis: {
                type: "category",
                axisLabel: {
                  interval: 0,
                  rotate: 50,
                  lineHeight: 10,
                  formatter: function (val) {
                    let length = val.length;
                    if (length > 5) {
                      let ret = "";
                      let rowN = Math.ceil(length / 5);
                      for (let i = 0; i < rowN; i++) {
                        let ret2 = "";
                        ret2 = val.substring(5 * i, 5 * (i + 1)) + "\n";
                        ret = ret + ret2;
                      }

                      return ret;
                    } else {
                      return val;
                    }
                  },
                },
              },
              yAxis: {},
              title: {
                text: "总体态势",
                left: "left",
              },
              series: [{ type: "bar" }, { type: "bar" }],
            };
            this.getHistogram(option);
          }
        });
    },
    //页面跳转
    jumpDataEvaluationMonitoring() {
      //this.$router.back()
      this.$router.push({
        path: "/",
        query: { value: this.$route.query.valueList },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 60px;
  background: #2b2b2b;
  opacity: 1;
  line-height: 60px;
  p {
    margin-left: 36px;
    color: white;
    font-size: 16px;
    i {
      display: block;
      margin-right: 30px;
      font-style: normal;
      color: #909399;
      cursor: pointer;
      float: right;
    }
  }
}
main {
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 30px;
  .dateTime {
    float: right;
    display: flex;
    width: 300px;
    height: 70px;
    line-height: 70px;
    justify-content: space-around;
    span {
      width: 40px;
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: #000000;
      opacity: 0.4;
    }
  }
  .dataChartSecond {
    clear: both;
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
    border: dashed 1px #707070;
    height: 350px;
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    #histogram {
      width: 25%;
      height: 100%;
    }
    // #summarizationData {
    //   width: 30%;
    //   height: 100%;
    // }
    #historialData {
      width: 30%;
      height: 100%;
    }
    #dailyTradingData {
      width: 30%;
      height: 100%;
    }
  }
  .tableSection {
    margin-top: 30px;
    height: 490px;
    border: dashed 1px #707070;
    padding: 15px 20px 10px 20px;
    position: relative;
    .pagination {
      position: absolute;
      bottom: 30px;
      right: 30px;
    }
  }
}
</style>
